<h1>保存</h1>

<ng-container *ngIf="serv.kongregate">
  <clr-alert [clrAlertClosable]="false" [clrAlertType]="'alert-warning'">
    <div clr-alert-item class="alert-item">
      <span class="alert-text">
        云存储是实验性的!建议导出备份。
      </span>
    </div>
  </clr-alert>
  <br />
</ng-container>

<div class="btn-group btn-primary">
  <button class="btn btn-success" (click)="serv.save()">
    <clr-icon shape="floppy"></clr-icon>
    保存
  </button>
  <button class="btn" (click)="serv.load()">
    <clr-icon shape="install"></clr-icon>
    加载
  </button>
  <button class="btn btn-danger" (click)="clearModal = true">
    <clr-icon shape="uninstall"></clr-icon>
    清空
  </button>
</div>

<div class="btn-group btn-primary" *ngIf="serv.kongregate">
  <button class="btn btn-info" (click)="serv.playFabLogin()">
    <clr-icon shape="user"></clr-icon>
    Log PlayFab
  </button>
  <button
    *ngIf="serv.playFabLogged"
    class="btn btn-success"
    (click)="serv.savePlayFab()"
  >
    <clr-icon shape="upload-cloud"></clr-icon>
    云存储
  </button>
  <button *ngIf="serv.playFabLogged" class="btn" (click)="serv.loadPlayFab()">
    <clr-icon shape="download-cloud"></clr-icon>
    云加载
  </button>
</div>
<p>
  <br />
  每5分钟自动保存一次。
  <br />
  上次保存时间: {{ serv.lastSave | date: "medium" }}
</p>
<h2>导出 / 导入存档</h2>
<textarea name="raw" [(ngModel)]="exp" rows="3"></textarea>
<div class="btn-group btn-primary">
  <button class="btn btn-success" (click)="export()">
    导出
  </button>
  <button class="btn" (click)="import()">
    导入
  </button>
</div>
<h2>自动保存设置</h2>
<div class="toggle-switch">
  <input
    type="checkbox"
    id="t1"
    [(ngModel)]="serv.options.autosaveNotification"
  />
  <label for="t1">自动保存通知</label>
</div>
<div class="toggle-switch">
  <input type="checkbox" id="autoSave" [(ngModel)]="serv.options.autoSave" />
  <label for="autoSave">Autosave</label>
</div>
<br />
<a href="https://likexia.gitee.io/idleant2/changelog.html"
   target="_blank">更新日志
</a>

<clr-modal [(clrModalOpen)]="clearModal">
  <h3 class="modal-title">重置</h3>
  <div class="modal-body">
    <p>你确定要删除所有游戏进度？</p>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-outline" (click)="clearModal = false">
      取消
    </button>
    <button
      type="button"
      class="btn btn-danger"
      (click)="this.serv.clear(); clearModal = false"
    >
      删除
    </button>
  </div>
</clr-modal>
